<template>
  <div class="fans-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs type="border-card">
        <el-tab-pane label="粉丝列表">
          <el-row :gutter="20">
            <el-col :lg="4" :xs="12" :md="6" :sm="6" v-for="fan in fans" :key="fan.id">
              <div class="fans">
                <div class="avatar"><el-avatar :src="fan.photo" shape="circle" :size="75"></el-avatar></div>
                <span class="name">{{ fan.name }}</span>
                <button size="mini" class="foucs"><i class="el-icon-plus"></i>关注</button>
              </div>
            </el-col>
          </el-row>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalCount"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            @current-change="onCurrentChange">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像">
          <div style="width: 600px;height:400px;" ref="echarts"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getFans } from '@/api/fans.js'
import * as echarts from 'echarts'
export default {
  name: 'FansIndex',
  components: {},
  props: {},
  data () {
    return {
      totalCount: 0,
      pageSize: 24,
      currentPage: 1,
      fans: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadFans()
  },
  mounted () {
    this.loadEcharts()
  },
  methods: {
    loadFans () {
      getFans({
        page: this.currentPage,
        per_page: this.pageSize
      }).then(res => {
        this.fans = res.data.data.results
        this.totalCount = res.data.data.total_count
      })
    },
    onCurrentChange (page) {
      this.loadFans()
    },
    loadEcharts () {
      var myChart = echarts.init(this.$refs.echarts)

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}

</script>
<style lang='less' scoped>
.fans {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-content: space-around;
  border: 1px solid #cccccc;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 10px;
  .name {
    padding: 10px 0;
  }

}
</style>
